<template>
  <div class="">
    <a-modal
      v-model:visible="visible"
      :maskClosable="false"
      :destroyOnClose="false"
      :title="title"
      :confirmLoading="loading"
      width="1000px"
      height="600px"
      @ok="save"
    >
      <a-spin :spinning="loading">
        <div class="o-auto" style="max-height: 700px">
          <Base ref="formRef"></Base>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRaw, onMounted } from "vue";
import { message } from "ant-design-vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
import _ from "lodash";
import Base from "@/pages/NewBatchCreateAd/adx/xiaomi/creativeConfig/Base.vue";

const store = batchCreateAdStore();

const formRef = ref();
const title = ref<string>("编辑创意基本信息");

const visible = ref<boolean>(true);
const loading = ref<boolean>(false);

const init = () => {};

const load = () => {};

const show = () => {
  visible.value = true;
};

const hide = () => {
  visible.value = false;
};

const setData = () => {
  if (!_.isEmpty(store.CreativeConfig)) {
    // formRef.value?.setData();
  }
};

const getData = () => {
  const form = toRaw(formRef.value.getData());
  return form;
};

const validate = async () => {
  return await formRef.value.validate();
};

const save = async () => {
  try {
    if (await validate()) {
      // 添加到store
      store.CreativeConfig = getData();
      visible.value = false;
    }
  } catch (err) {
    if (!_.isObject(err)) {
      message.error("保存失败: " + err);
    }
    return;
  } finally {
    loading.value = false;
  }
};

const reset = () => {
  formRef.value.resetFields();
};

init();

onMounted(() => {
  // 设置数据
  setData();
});

defineExpose({
  load,
  show,
  hide,
  setData,
  getData,
  reset,
  visible,
});
</script>

<style lang="less" scoped></style>
